<template>
	<view>
		<view class="box">
			<view class="re ip-img-warp">
				<swiper class="swiper_1" :autoplay="true" :interval="3000" :circular="true">
					<swiper-item v-for="image in product.photos">
						<image mode="heightFix" :src="image" class="banner_size"></image>
					</swiper-item>
				</swiper>
				<!-- <image src="@/static/icon_arrow_6.png" class="prev_page_pos vt"></image> -->
			</view>

			<view class="pa30 r_area_block_1 mt30">
				<view class="">
					<view class="flex_box aic fs38">
						<view class="text-info">当前报价：</view>
						<view class="text-price fsb">￥{{product.price}}</view>
					</view>	
					<view class="mt20 flex_box aic">
						<view class="flex-1">
							<view><text class="text-info">最高：</text>￥{{product.max_p}}</view>
							<view class="mt10"><text class="text-info">最低：</text>￥{{product.min_p}}</view>
						</view>
						<view >
							<view><text class="text-info">类目：</text>{{product.cat}}</view>
							<view class="mt10"><text class="text-info">产品：</text>{{product.product_name}}</view>
						</view>
					</view>
					
					<!-- <view class="level_description_btn">开机屏好</view> -->
				</view>
			</view>
			
		<view>
			 <mrsongCharts  :config="opt"   unit='元'  :chartsData="prices" type='line' title="最近15天价格趋势" align='left' />
		</view>
		</view><!-- box -->
	</view>
</template>

<script setup lang="ts">
	
	import mrsongCharts from '@/uni_modules/mrsong-charts/components/mrsong-charts/mrsong-charts.vue';
	
	import ljPointout from '@/components/lj-pointout/lj-pointout.vue'
	import { priceLog } from '@/api/product'
	import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app'
	import {ref} from 'vue'


	const product = ref({ product_id: 0, photos: [] });
	const prices = ref({});
	
	const opt = ref({
		 color: ["#91CB74","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	})


	const getProductPriceData = async (id : Number,lid:Number) => {
		let data = await priceLog({ id: id,leve_id:lid });
		product.value = data.detail;
		prices.value =  JSON.parse(JSON.stringify(data.chartData));
		uni.setNavigationBarTitle({title:data.detail.product_name})
	}



	onLoad((option : any) => {
		getProductPriceData(option.id || 1556,option.lid || 15);
	})
</script>

<style>
	page {
		background: #F4F6F8;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.ip-img-warp {
		background-color: #fff;
		text-align: center;
	}

	.banner_size {
		width: 100%;
		height: 450rpx;

	}

	.swiper_1 {
		height: 450rpx;
	}

	.amount_money_fix {
		position: fixed;
		width: 100%;
		padding: 22rpx 20rpx calc(22rpx + env(safe-area-inset-bottom));
		left: 0;
		bottom: 0;
		background: #fff;
		z-index: 5;
	}

	.level_description_btn {
		position: relative;
		width: 200rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: linear-gradient(90deg, #FF791A 0%, #EF330C 100%);
		box-shadow: 0rpx 6rpx 20rpx 0rpx #FFAE9A;
		border-radius: 4rpx;
	}

	.s_btn_1 {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 180rpx;
		height: 80rpx;
		font-size: 26rpx;
		color: #F7DA1C;
		/* box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(41,255,154,0.5); */
		border-radius: 40rpx;
		border: 1rpx solid #F7DA1C;
	}

	.s_btn_2 {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 180rpx;
		height: 80rpx;
		font-size: 26rpx;
		color: #fff;
		 background: linear-gradient(180deg, #F7DA1C 0%, #ffc200 100%);
		box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(41, 255, 154, 0.5);
		border-radius: 40rpx;
	}

	.r_area_block_1 {
		position: relative;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
</style>